<template>
	<view class="home">
		<view class="bgTemp"></view>
		<view class="sys-head" :style="{ height: sysHeight()+'px' }"></view>
		<view class="content position_zindex">
			<view class="headbox flex-center-between">
				<image src="/static/head1.png" class="head1" mode=""></image>
				<image src="/static/head2.png" class="head2" mode=""></image>
			</view>
			<view class="detail">
				<view class="titlebox flex-align-center">
					<view class="leftbox"></view>
					<view class="title ft-32 ft-w-600">心理测评</view>
				</view>
				<view class="qxylbox">
					<view class="topbox flex-center-between">
						<view class="smallbox" @click="toemotion"></view>
						<view class="bigbox" @click="topressure"></view>
					</view>
					<view class="bototmbox mt-24 flex-center-between">
						<view class="bigbox" @click="toemotion"></view>
						<view class="smallbox"  @click="topressure"></view>
					</view>
				</view>
				<view class="csjlbox">
					<image src="/static/mbti.png" class="mbti" mode="" @click="navigto('/pagesA/moodtest/moodtest?type=3')" ></image>
					<image src="/static/cpjl.png" class="cpjl" mode=""  @click="navigto('/pagesA/moodtest/testhistory')"></image>
				</view>
				
			</view>
			
		</view>
		<view class="btmbox mt-20 flex-between">
			<image src="/static/mx.png" class="mx" mode=""  @click="navigto('/pagesA/musicplayback/selecettype')"></image>
			<view class="ml-10">
				<image src="/static/mrjl.png" class="mrjl" mode="" @click="navigto('/pagesA/releasenotes/releasenotes')"></image>
				<image src="/static/zjjz.png" class="mrjl mt-10" mode=""  @click="navigto('/pagesA/lecture/lecture')" ></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		onLoad() {
		},
		methods: {
			// 情绪测试
			toemotion(){
				console.log('情绪');
				uni.navigateTo({
					url:'/pagesA/moodtest/moodtest?type=1'
				})
			},
			// 压力测试
			topressure(){
				console.log('压力');
				uni.navigateTo({
					url:'/pagesA/moodtest/moodtest?type=2'
				})
			},
			navigto(url){
				uni.navigateTo({
					url:url
				})
			},
			
		}
	}
</script>
<style lang="scss" scoped>
	view{
		box-sizing: border-box;
	}
	.bgTemp{
		width: 750rpx;
		height: 520rpx;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		background-image: url('/static/homebg.png');
		background-size: 100% 100%;
	}
	.content {
		.headbox{
			padding: 38rpx 28rpx 0;
			.head1{
				width: 392rpx;
				height: 156rpx;
			}
			.head2{
				width: 184rpx;
				height: 184rpx;
			}
		}
		.detail{
			width: 690rpx;
			margin: 8rpx auto;
			border-radius: 20rpx;
			opacity: 1;
			background: #ffffff;
			.titlebox{
				height: 108rpx;
				.leftbox{
					width: 8rpx;
					height: 40rpx;
					border-radius: 0 10rpx 10rpx 0;
					opacity: 1;
					background: linear-gradient(0deg, #9f5eff 0%, #d199ff 100%);
				}
				.title{
					margin-left: 16rpx;
				}
			}
		
			.qxylbox{
				width: 658rpx;
				margin: 0 auto;
				height: 416rpx;
				background-image: url('/static/ylqx.png');
				background-size: 100% 100%;
				
				.smallbox{
					width: 220rpx;
					height: 188rpx;
				}
				.bigbox{
					width: 402rpx;
					height: 188rpx;
				}
			}
			
			.csjlbox{
				width: 658rpx;
				height: 456rpx;
				margin: 12rpx auto 0;
				position: relative;
				
				.mbti{
					width: 456rpx;
					height: 456rpx;
					position: absolute;
					bottom: 0;
					left: 0;
					z-index: 2;
				}
				.cpjl{
					width: 233.73rpx;
					height: 453rpx;
					position: absolute;
					bottom: 0;
					right: 0;
				}
			}
			
		}
	}
	.btmbox{
		width: 690rpx;
		margin: 20rpx auto 0;
		height: 490rpx;
		.mx{
			width: 340rpx;
			height: 490rpx;
			flex-shrink: 0;
		}
		.mrjl{
			width: 340rpx;
			height: 240rpx;
			flex-shrink: 0;
		}
	}
</style>